<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test Sicurezza Rete Domestica — Open Source Society</title>
    <style>
        :root {
            --bg-primary: #ffffff;
            --bg-secondary: #f8f8f8;
            --bg-card: #ffffff;
            --bg-input: #f0f0f0;
            --accent: #ff8c00;
            --accent-secondary: #ffc107;
            --accent-dim: #e07b00;
            --accent-glow: rgba(255, 140, 0, 0.1);
            --text-primary: #1a1a1a;
            --text-secondary: #555555;
            --text-muted: #999999;
            --border: #e0e0e0;
            --success: #4caf50;
            --warning: #ff9800;
            --danger: #f44336;
            --info: #2196f3;
            --radius: 8px;
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg-primary); color: var(--text-primary); line-height: 1.6; min-height: 100vh; }
        .container { max-width: 920px; margin: 0 auto; padding: 0 16px 40px; }
        .site-header { background: #ffffff; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); }
        .site-header .logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
        .site-header .logo svg { width: 44px; height: 44px; }
        .site-header .logo-text { display: flex; flex-direction: column; line-height: 1.1; }
        .site-header .logo-text .open-source { font-size: 1.2em; font-weight: 800; color: #1a1a1a; letter-spacing: -0.5px; }
        .site-header .logo-text .society { font-size: 0.9em; font-weight: 600; color: var(--accent); font-style: italic; }
        .site-header .site-link { color: var(--text-muted); text-decoration: none; font-size: 0.85em; font-weight: 500; transition: color 0.2s; }
        .site-header .site-link:hover { color: var(--accent); }
        .hero { background: linear-gradient(180deg, #fff 0%, #fff8f0 100%); padding: 44px 24px 36px; text-align: center; border-bottom: 3px solid var(--accent); }
        .hero h1 { font-size: 2.1em; font-weight: 800; color: var(--text-primary); margin-bottom: 8px; }
        .hero h1 span { color: var(--accent); }
        .hero .tagline { color: var(--text-secondary); font-size: 1em; font-style: italic; margin-bottom: 10px; }
        .hero .subtitle { color: var(--text-muted); font-size: 0.88em; max-width: 600px; margin: 0 auto; }
        .progress-wrap { margin: 26px 0; }
        .progress-bar { width: 100%; height: 5px; background: var(--bg-input); border-radius: 3px; overflow: hidden; }
        .progress-fill { height: 100%; width: 0%; background: var(--accent); border-radius: 3px; transition: width 0.4s ease; }
        .progress-label { text-align: right; font-size: 0.75em; color: var(--text-muted); margin-top: 4px; }
        .section { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 18px; transition: border-color 0.3s; }
        .section:hover { border-color: var(--accent); }
        .section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
        .section-header svg { width: 26px; height: 26px; flex-shrink: 0; }
        .section-header h2 { font-size: 1.05em; font-weight: 700; color: var(--text-primary); }
        .question { margin-bottom: 12px; padding: 14px; background: var(--bg-card); border-radius: 6px; border: 1px solid var(--border); transition: border-color 0.2s; }
        .question:hover { border-color: var(--accent); }
        .question label.q-label { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; font-weight: 600; font-size: 0.9em; line-height: 1.4; color: var(--text-primary); }
        .question .q-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: var(--accent-glow); color: var(--accent); border-radius: 50%; font-size: 0.7em; font-weight: 700; flex-shrink: 0; margin-top: 1px; }
        .question .weight { color: var(--text-muted); font-size: 0.75em; font-weight: 400; margin-left: auto; white-space: nowrap; }
        .question .q-hint { font-size: 0.78em; color: var(--text-muted); font-weight: 400; margin-top: 4px; padding-left: 30px; }
        .options { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-left: 30px; }
        .options label { display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 7px 12px; background: var(--bg-input); border-radius: 5px; font-size: 0.83em; color: var(--text-secondary); transition: all 0.2s; border: 1px solid transparent; }
        .options label:hover { background: #fff; color: var(--text-primary); border-color: var(--accent); }
        .options input[type="radio"] { accent-color: var(--accent); width: 14px; height: 14px; }
        .btn-group { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0; }
        .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border: none; border-radius: 6px; font-size: 0.92em; font-weight: 600; cursor: pointer; transition: all 0.2s; color: #fff; }
        .btn svg { width: 18px; height: 18px; }
        .btn-primary { background: var(--accent); }
        .btn-primary:hover { background: var(--accent-dim); transform: translateY(-1px); box-shadow: 0 4px 16px var(--accent-glow); }
        .btn-download { background: var(--info); }
        .btn-download:hover { background: #1976d2; transform: translateY(-1px); }
        .btn-email { background: #7c4dff; }
        .btn-email:hover { background: #651fff; transform: translateY(-1px); }
        .btn-share { background: var(--success); }
        .btn-share:hover { background: #388e3c; transform: translateY(-1px); }
        .btn-reset { background: var(--danger); }
        .btn-reset:hover { background: #d32f2f; transform: translateY(-1px); }
        #result { display: none; }
        .result-section { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; margin-bottom: 18px; }
        .score-wrap { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; justify-content: center; }
        .score-ring { position: relative; width: 140px; height: 140px; }
        .score-ring svg { transform: rotate(-90deg); }
        .score-ring .ring-bg { fill: none; stroke: var(--bg-input); stroke-width: 10; }
        .score-ring .ring-fill { fill: none; stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 1s ease; }
        .score-value { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2em; font-weight: 800; }
        .score-info { text-align: left; }
        .verdict { font-size: 1.2em; font-weight: 700; margin-bottom: 6px; }
        .score-detail { color: var(--text-muted); font-size: 0.9em; }
        .rec-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px; margin: 10px 0; background: var(--bg-card); border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0; border-top: 1px solid var(--border); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
        .rec-item svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
        .rec-item .rec-tool { color: var(--accent); font-weight: 700; font-size: 0.9em; }
        .rec-item .rec-desc { color: var(--text-secondary); font-size: 0.85em; margin-top: 3px; }
        .table-wrap { overflow-x: auto; }
        table { width: 100%; border-collapse: collapse; font-size: 0.85em; }
        th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); }
        th { color: var(--accent); font-weight: 700; font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.5px; }
        td { color: var(--text-secondary); }
        td:first-child { color: var(--text-primary); font-weight: 600; }
        .footer { text-align: center; padding: 30px 0 20px; color: var(--text-muted); font-size: 0.8em; border-top: 1px solid var(--border); margin-top: 20px; }
        .footer a { color: var(--accent); text-decoration: none; font-weight: 600; }
        .footer a:hover { text-decoration: underline; }
        @media (max-width: 600px) {
            .hero h1 { font-size: 1.5em; }
            .options { flex-direction: column; }
            .options label { width: 100%; }
            .btn-group { flex-direction: column; }
            .btn { width: 100%; }
            .score-wrap { flex-direction: column; text-align: center; }
            .score-info { text-align: center; }
        }
        @media print { .btn-group { display: none; } .site-header { border-bottom: 2px solid var(--accent); } }
    </style>
</head>
<body>
<div class="site-header">
    <a href="https://opensourcesociety.net" class="logo" target="_blank">
        <svg viewBox="0 0 60 60" fill="none"><circle cx="30" cy="10" r="4.5" fill="#ffc107"/><circle cx="16" cy="22" r="4" fill="#ff8c00"/><circle cx="44" cy="22" r="4" fill="#ff8c00"/><circle cx="10" cy="38" r="3.5" fill="#ffc107"/><circle cx="30" cy="34" r="5.5" fill="#ff8c00"/><circle cx="50" cy="38" r="3.5" fill="#ffc107"/><circle cx="18" cy="50" r="4" fill="#ff8c00"/><circle cx="42" cy="50" r="4" fill="#ff8c00"/><line x1="30" y1="14.5" x2="16" y2="22" stroke="#ffc107" stroke-width="1.5"/><line x1="30" y1="14.5" x2="44" y2="22" stroke="#ffc107" stroke-width="1.5"/><line x1="16" y1="26" x2="10" y2="38" stroke="#ff8c00" stroke-width="1.2"/><line x1="16" y1="26" x2="30" y2="34" stroke="#ff8c00" stroke-width="1.2"/><line x1="44" y1="26" x2="50" y2="38" stroke="#ff8c00" stroke-width="1.2"/><line x1="44" y1="26" x2="30" y2="34" stroke="#ff8c00" stroke-width="1.2"/><line x1="10" y1="41.5" x2="18" y2="50" stroke="#ffc107" stroke-width="1.2"/><line x1="30" y1="39.5" x2="18" y2="50" stroke="#ffc107" stroke-width="1.2"/><line x1="30" y1="39.5" x2="42" y2="50" stroke="#ffc107" stroke-width="1.2"/><line x1="50" y1="41.5" x2="42" y2="50" stroke="#ffc107" stroke-width="1.2"/></svg>
        <div class="logo-text"><span class="open-source">Open Source</span><span class="society">Society</span></div>
    </a>
    <a href="https://opensourcesociety.net" class="site-link" target="_blank">opensourcesociety.net</a>
</div>
<div class="hero">
    <h1>Quanto è sicura <span>la tua rete</span> a casa?</h1>
    <p class="tagline">I tuoi dati. Le tue regole. La tua infrastruttura.</p>
    <p class="subtitle">Rispondi a 25 domande semplici per scoprire quanto è protetta la tua rete domestica e quali passi fare per migliorarla. Tutto con strumenti gratuiti e open source, senza iscrizioni né cloud.</p>
</div>
<div class="container">
    <div class="progress-wrap">
        <div class="progress-bar"><div class="progress-fill" id="progress"></div></div>
        <div class="progress-label"><span id="progressText">0</span>/25 domande</div>
    </div>
    <form id="quiz">
        <!-- SEZIONE 1 -->
        <div class="section">
            <div class="section-header">
                <svg viewBox="0 0 24 24" fill="none" stroke="#ff8c00" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="7" rx="1"/><rect x="2" y="14" width="20" height="7" rx="1"/><circle cx="6" cy="6.5" r="1" fill="#ffc107"/><circle cx="6" cy="17.5" r="1" fill="#ffc107"/><path d="M10 6.5h8M10 17.5h8"/></svg>
                <h2>Il tuo router e la connessione</h2>
            </div>
            <div class="question" data-weight="5">
                <label class="q-label"><span class="q-num">1</span> Che tipo di router usi? <span class="weight">peso: 5</span></label>
                <p class="q-hint">Il router è il dispositivo che porta internet in casa tua.</p>
                <div class="options">
                    <label><input type="radio" name="q1" value="0"> Quello dato in prestito dal provider</label>
                    <label><input type="radio" name="q1" value="2"> Un router consumer (TP-Link, Netgear, ecc.)</label>
                    <label><input type="radio" name="q1" value="4"> Un router con sistema operativo aperto (OpenWrt, pfSense)</label>
                    <label><input type="radio" name="q1" value="5"> Un firewall dedicato (hardware separato)</label>
                </div>
            </div>
            <div class="question" data-weight="5">
                <label class="q-label"><span class="q-num">2</span> Hai controllato quali porte sono aperte verso l'esterno? <span class="weight">peso: 5</span></label>
                <p class="q-hint">Le porte aperte sono "finestre" che lasciano entrare traffico dall'esterno. Meno ce ne sono, meglio è.</p>
                <div class="options">
                    <label><input type="radio" name="q2" value="0"> Non lo so / non ho mai controllato</label>
                    <label><input type="radio" name="q2" value="2"> Sì, ce ne sono alcune</label>
                    <label><input type="radio" name="q2" value="5"> Nessuna porta aperta</label>
                </div>
            </div>
            <div class="question" data-weight="5">
                <label class="q-label"><span class="q-num">3</span> Che tipo di connessione hai? <span class="weight">peso: 5</span></label>
                <div class="options">
                    <label><input type="radio" name="q3" value="2"> Fibra ottica pura (FTTH)</label>
                    <label><input type="radio" name="q3" value="3"> Fibra mista (FTTC)</label>
                    <label><input type="radio" name="q3" value="2"> ADSL / VDSL</label>
                    <label><input type="radio" name="q3" value="1"> 4G / 5G</label>
                </div>
            </div>
            <div class="question" data-weight="4">
                <label class="q-label"><span class="q-num">4</span> Il tuo indirizzo IP pubblico è fisso o cambia? <span class="weight">peso: 4</span></label>
                <p class="q-hint">L'IP pubblico è l'"indirizzo di casa" che vedi da internet. Se cambia spesso, sei un po' più protetto.</p>
                <div class="options">
                    <label><input type="radio" name="q4" value="5"> Cambia (dinamico)</label>
                    <label><input type="radio" name="q4" value="2"> È fisso (statico)</label>
                    <label><input type="radio" name="q4" value="3"> Non ho un IP pubblico diretto (CGNAT)</label>
                </div>
            </div>
            <div class="question" data-weight="5">
                <label class="q-label"><span class="q-num">5</span> I dispositivi "smart" (tele, lampadine, assistenti) sono su una rete separata? <span class="weight">peso: 5</span></label>
                <p class="q-hint">Separare i dispositivi smart dal resto della rete limita i danni se uno viene compromesso.</p>
                <div class="options">
                    <label><input type="radio" name="q5" value="0"> No, tutto insieme sulla stessa rete</label>
                    <label><input type="radio" name="q5" value="3"> Ho una rete "guest" separata</label>
                    <label><input type="radio" name="q5" value="5"> Sì, rete dedicata con isolamento</label>
                </div>
            </div>
        </div>
        <!-- SEZIONE 2 -->
        <div class="section">
            <div class="section-header">
                <svg viewBox="0 0 24 24" fill="none" stroke="#ff8c00" stroke-width="1.5" stroke-linecap="round"><path d="M5 12.55a11 11 0 0 1 14.08 0"/><path d="M1.42 9a16 16 0 0 1 21.16 0"/><path d="M8.53 16.11a6 6 0 0 1 6.95 0"/><circle cx="12" cy="20" r="1" fill="#ffc107"/></svg>
                <h2>Il tuo Wi-Fi</h2>
            </div>
            <div class="question" data-weight="5">
                <label class="q-label"><span class="q-num">6</span> Quale tipo di sicurezza usa il tuo Wi-Fi? <span class="weight">peso: 5</span></label>
                <p class="q-hint">Lo trovi nelle impostazioni del router, solitamente nella sezione "Wireless" o "Wi-Fi".</p>
                <div class="options">
                    <label><input type="radio" name="q6" value="0"> WEP, WPA o WPA2 (vecchi standard)</label>
                    <label><input type="radio" name="q6" value="3"> WPA2 con AES (buono)</label>
                    <label><input type="radio" name="q6" value="5"> WPA3 (il più sicuro)</label>
                </div>
            </div>
            <div class="question" data-weight="4">
                <label class="q-label"><span class="q-num">7</span> La password del Wi-Fi è lunga e unica? <span class="weight">peso: 4</span></label>
                <div class="options">
                    <label><input type="radio" name="q7" value="0"> No, è corta o la uso altrove</label>
                    <label><input type="radio" name="q7" value="3"> Sì, ha 12-15 caratteri</label>
                    <label><input type="radio" name="q7" value="5"> Sì, 16+ caratteri casuali, usata solo lì</label>
                </div>
            </div>
            <div class="question" data-weight="4">
                <label class="q-label"><span class="q-num">8</span> Hai disattivato WPS, UPnP e l'accesso remoto al router? <span class="weight">peso: 4</span></label>
                <p class="q-hint">WPS e UPnP sono funzioni comode ma possono essere sfruttate per entrare nella rete. L'accesso remoto al router da internet è rischioso.</p>
                <div class="options">
                    <label><input type="radio" name="q8" value="0"> No / non so dove guardare</label>
                    <label><input type="radio" name="q8" value="3"> Ne ho disattivati alcuni</label>
                    <label><input type="radio" name="q8" value="5"> Sì, tutti disattivati</label>
                </div>
            </div>
            <div class="question" data-weight="3">
                <label class="q-label"><span class="q-num">9</span> Hai una rete Wi-Fi separata per gli ospiti? <span class="weight">peso: 3</span></label>
                <div class="options">
                    <label><input type="radio" name="q9" value="2"> No</label>
                    <label><input type="radio" name="q9" value="4"> Sì, e non può accedere ai tuoi dispositivi</label>
                </div>
            </div>
        </div>
        <!-- SEZIONE 3 -->
        <div class="section">
            <div class="section-header">
                <svg viewBox="0 0 24 24" fill="none" stroke="#ff8c00" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/><path d="M6 8h4M6 11h2" stroke-linecap="round"/></svg>
                <h2>I tuoi dispositivi</h2>
            </div>
            <div class="question" data-weight="5">
                <label class="q-label"><span class="q-num">10</span> Quanti dispositivi "smart" o IoT hai in casa? <span class="weight">peso: 5</span></label>
                <p class="q-hint">Tele intelligenti, assistenti vocali, lampadine, prese smart, telecamere, ecc.</p>
                <div class="options">
                    <label><input type="radio" name="q10" value="5"> 0-2</label>
                    <label><input type="radio" name="q10" value="3"> 3-5</label>
                    <label><input type="radio" name="q10" value="1"> 6-10</label>
                    <label><input type="radio" name="q10" value="0"> Più di 10</label>
                </div>
            </div>
            <div class="question" data-weight="4">
                <label class="q-label"><span class="q-num">11</span> Hai cambiato le password di default dei dispositivi smart? <span class="weight">peso: 4</span></label>
                <p class="q-hint">Molti dispositivi smart hanno password preimpostate (tipo "admin/admin") che sono note a tutti.</p>
                <div class="options">
                    <label><input type="radio" name="q11" value="0"> No, uso le password di default</label>
                    <label><input type="radio" name="q11" value="3"> Alcuni sì, altri no</label>
                    <label><input type="radio" name="q11" value="5"> Tutti con password diverse e forti</label>
                </div>
            </div>
            <div class="question" data-weight="4">
                <label class="q-label"><span class="q-num">12</span> Il firewall del computer è attivo? <span class="weight">peso: 4</span></label>
                <p class="q-hint">È una funzione integrata nel sistema operativo (Windows Defender Firewall, firewall macOS, ecc.).</p>
                <div class="options">
                    <label><input type="radio" name="q12" value="0"> No</label>
                    <label><input type="radio" name="q12" value="3"> Solo quando sono in rete pubblica</label>
                    <label><input type="radio" name="q12" value="5"> Sì, sempre attivo</label>
                </div>
            </div>
            <div class="question" data-weight="4">
                <label class="q-label"><span class="q-num">13</span> Hai un NAS o un PC sempre acceso in rete? <span class="weight">peso: 4</span></label>
                <p class="q-hint">NAS = disco di rete (tipo Synology, QNAP). Un PC sempre acceso che condivide file o servizi.</p>
                <div class="options">
                    <label><input type="radio" name="q13" value="5"> No</label>
                    <label><input type="radio" name="q13" value="2"> Sì, ma accessibile solo da casa</label>
                    <label><input type="radio" name="q13" value="1"> Sì, e accessibile anche da fuori</label>
                </div>
            </div>
            <div class="question" data-weight="4">
                <label class="q-label"><span class="q-num">14</span> I tuoi dispositivi si aggiornano da soli? <span class="weight">peso: 4</span></label>
                <p class="q-hint">Aggiornamenti di sistema, app, firmware dei dispositivi smart.</p>
                <div class="options">
                    <label><input type="radio" name="q14" value="0"> No, mai aggiornato</label>
                    <label><input type="radio" name="q14" value="3"> Ogni tanto, a mano</label>
                    <label><input type="radio" name="q14" value="5"> Sì, aggiornamenti automatici attivi</label>
                </div>
            </div>
        </div>
        <!-- SEZIONE 4 -->
        <div class="section">
            <div class="section-header">
                <svg viewBox="0 0 24 24" fill="none" stroke="#ff8c00" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="M9 12l2 2 4-4"/></svg>
                <h2>Strumenti di protezione attivi</h2>
            </div>
            <div class="question" data-weight="5">
                <label class="q-label"><span class="q-num">15</span> Blochi annunci e siti malevoli a livello di rete? <span class="weight">peso: 5</span></label>
                <p class="q-hint">Un filtro DNS (come Pi-hole o AdGuard Home) blocca pubblicità, tracker e siti pericolosi per tutti i dispositivi in casa.</p>
                <div class="options">
                    <label><input type="radio" name="q15" value="0"> No</label>
                    <label><input type="radio" name="q15" value="3"> Uso un DNS pubblico sicuro (Quad9, Google DNS)</label>
                    <label><input type="radio" name="q15" value="5"> Sì, ho un filtro DNS gestito da me</label>
                </div>
            </div>
            <div class="question" data-weight="5">
                <label class="q-label"><span class="q-num">16</span> Hai un sistema che rileva intrusioni o comportamenti anomali? <span class="weight">peso: 5</span></label>
                <p class="q-hint">Un IDS/IPS è come una "telecamera di sicurezza" per la rete: segnala tentativi di accesso non autorizzati.</p>
                <div class="options">
                    <label><input type="radio" name="q16" value="0"> No</label>
                    <label><input type="radio" name="q16" value="3"> Solo antivirus sui singoli PC</label>
                    <label><input type="radio" name="q16" value="5"> Sì, ho un sistema di monitoraggio di rete</label>
                </div>
            </div>
            <div class="question" data-weight="4">
                <label class="q-label"><span class="q-num">17</span> Noti quando un dispositivo sconosciuto si collega alla tua rete? <span class="weight">peso: 4</span></label>
                <div class="options">
                    <label><input type="radio" name="q17" value="0"> No, non lo saprei</label>
                    <label><input type="radio" name="q17" value="3"> A volte controllo manualmente</label>
                    <label><input type="radio" name="q17" value="5"> Sì, ricevo un avviso automatico</label>
                </div>
            </div>
            <div class="question" data-weight="4">
                <label class="q-label"><span class="q-num">18</span> Fai controlli periodici per trovare vulnerabilità nella rete? <span class="weight">peso: 4</span></label>
                <p class="q-hint">Una scansione di vulnerabilità è come una "visita medica" periodica per la tua rete.</p>
                <div class="options">
                    <label><input type="radio" name="q18" value="0"> Mai</label>
                    <label><input type="radio" name="q18" value="3"> Una volta, tempo fa</label>
                    <label><input type="radio" name="q18" value="5"> Sì, periodicamente</label>
                </div>
            </div>
            <div class="question" data-weight="4">
                <label class="q-label"><span class="q-num">19</span> I log di rete sono raccolti in un unico posto? <span class="weight">peso: 4</span></label>
                <p class="q-hint">I log sono i "registri" di ciò che succede in rete. Raccoglierli aiuta a capire cosa è successo in caso di problema.</p>
                <div class="options">
                    <label><input type="radio" name="q19" value="0"> No</label>
                    <label><input type="radio" name="q19" value="3"> Ci sono log sparsi sui vari dispositivi</label>
                    <label><input type="radio" name="q19" value="5"> Sì, in un sistema centralizzato</label>
                </div>
            </div>
        </div>
        <!-- SEZIONE 5 -->
        <div class="section">
            <div class="section-header">
                <svg viewBox="0 0 24 24" fill="none" stroke="#ff8c00" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
                <h2>Abitudini e buone pratiche</h2>
            </div>
            <div class="question" data-weight="4">
                <label class="q-label"><span class="q-num">20</span> Come gestisci le tue password? <span class="weight">peso: 4</span></label>
                <div class="options">
                    <label><input type="radio" name="q20" value="0"> Le scrivo su un foglio / le tengo in testa</label>
                    <label><input type="radio" name="q20" value="3"> Uso un gestore cloud (1Password, LastPass)</label>
                    <label><input type="radio" name="q20" value="5"> Uso un gestore password che tengo io (self-hosted)</label>
                </div>
            </div>
            <div class="question" data-weight="4">
                <label class="q-label"><span class="q-num">21</span> Come ti colleghi alla rete di casa da fuori? <span class="weight">peso: 4</span></label>
                <p class="q-hint">Per esempio per lavorare da remoto, controllare una telecamera o accedere al NAS.</p>
                <div class="options">
                    <label><input type="radio" name="q21" value="0"> Apro porte sul router (port forwarding)</label>
                    <label><input type="radio" name="q21" value="3"> Uso una VPN a pagamento</label>
                    <label><input type="radio" name="q21" value="5"> Uso una VPN che gestisco io (WireGuard, Tailscale)</label>
                </div>
            </div>
            <div class="question" data-weight="3">
                <label class="q-label"><span class="q-num">22</span> Hai backup dei tuoi dati al di fuori di casa? <span class="weight">peso: 3</span></label>
                <div class="options">
                    <label><input type="radio" name="q22" value="0"> No</label>
                    <label><input type="radio" name="q22" value="3"> Sì, ma solo su un disco esterno a casa</label>
                    <label><input type="radio" name="q22" value="5"> Sì, crittografati e in un'altra location</label>
                </div>
            </div>
            <div class="question" data-weight="4">
                <label class="q-label"><span class="q-num">23</span> Hai disattivato la raccolta dati (telemetria) sui tuoi dispositivi? <span class="weight">peso: 4</span></label>
                <p class="q-hint">Molti dispositivi inviano dati di utilizzo a produttori o cloud. Puoi disattivarlo nelle impostazioni.</p>
                <div class="options">
                    <label><input type="radio" name="q23" value="0"> No</label>
                    <label><input type="radio" name="q23" value="3"> Su alcuni sì</label>
                    <label><input type="radio" name="q23" value="5"> Sì, su tutti i dispositivi</label>
                </div>
            </div>
            <div class="question" data-weight="5">
                <label class="q-label"><span class="q-num">24</span> Sai cosa fare se noti un problema di sicurezza? <span class="weight">peso: 5</span></label>
                <p class="q-hint">Per esempio: un dispositivo che si comporta in modo strano, un avviso di sicurezza, un tentativo di accesso non autorizzato.</p>
                <div class="options">
                    <label><input type="radio" name="q24" value="0"> No, non ho un piano</label>
                    <label><input type="radio" name="q24" value="3"> Ho un'idea generale</label>
                    <label><input type="radio" name="q24" value="5"> Sì, ho una procedura scritta</label>
                </div>
            </div>
            <div class="question" data-weight="4">
                <label class="q-label"><span class="q-num">25</span> Hai un dispositivo dedicato per la sicurezza di rete? <span class="weight">peso: 4</span></label>
                <p class="q-hint">Un piccolo computer sempre acceso (Raspberry Pi, mini-PC) che gira i strumenti di sicurezza.</p>
                <div class="options">
                    <label><input type="radio" name="q25" value="0"> No</label>
                    <label><input type="radio" name="q25" value="3"> Raspberry Pi o mini-PC</label>
                    <label><input type="radio" name="q25" value="5"> Server dedicato con 8GB+ di RAM</label>
                </div>
            </div>
        </div>
        <!-- BUTTONS -->
        <div class="btn-group">
            <button type="button" class="btn btn-primary" onclick="calcola()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg> Calcola il mio punteggio</button>
            <button type="button" class="btn btn-download" onclick="scaricaReport()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg> Scarica il report</button>
            <button type="button" class="btn btn-email" onclick="mandaReport()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M22 7l-10 6L2 7"/></svg> Invia via email</button>
            <button type="button" class="btn btn-share" onclick="condividiReport()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg> Condividi</button>
            <button type="button" class="btn btn-reset" onclick="reset()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg> Ricomincia</button>
        </div>
    </form>
    <!-- RISULTATO -->
    <div id="result">
        <div class="result-section">
            <div class="section-header"><svg viewBox="0 0 24 24" fill="none" stroke="#ff8c00" stroke-width="1.5" stroke-linecap="round"><path d="M12 20V10M18 20V4M6 20v-4"/></svg><h2>Il tuo risultato</h2></div>
            <div class="score-wrap">
                <div class="score-ring">
                    <svg width="140" height="140" viewBox="0 0 140 140"><circle class="ring-bg" cx="70" cy="70" r="58"/><circle class="ring-fill" id="ringFill" cx="70" cy="70" r="58" stroke-dasharray="364.4" stroke-dashoffset="364.4"/></svg>
                    <div class="score-value" id="scoreValue">0%</div>
                </div>
                <div class="score-info"><div class="verdict" id="verdict"></div><div class="score-detail" id="scoreDetail"></div></div>
            </div>
        </div>
        <div class="result-section">
            <div class="section-header"><svg viewBox="0 0 24 24" fill="none" stroke="#ff8c00" stroke-width="1.5" stroke-linecap="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg><h2>Cosa puoi fare per migliorare (tutto gratuito e open source)</h2></div>
            <div id="recs"></div>
        </div>
        <div class="result-section">
            <div class="section-header"><svg viewBox="0 0 24 24" fill="none" stroke="#ff8c00" stroke-width="1.5" stroke-linecap="round"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg><h2>Kit consigliato per la rete domestica</h2></div>
            <div class="table-wrap">
                <table>
                    <tr><th>Cosa fa</th><th>Strumento</th><th>Costo</th></tr>
                    <tr><td>Protegge la rete + VPN</td><td>GL.iNet BE9300 (OpenWrt)</td><td>Hardware ~€300</td></tr>
                    <tr><td>Blocca IP malevoli</td><td>BanIP</td><td>Gratis</td></tr>
                    <tr><td>Analizza minacce in tempo reale</td><td>CrowdSec</td><td>Gratis</td></tr>
                    <tr><td>Blocca pubblicità e siti pericolosi</td><td>AdGuard Home</td><td>Gratis</td></tr>
                    <tr><td>Protegge i dispositivi smart</td><td>tinyHIPPO</td><td>Gratis</td></tr>
                    <tr><td>Avvisa se entra un dispositivo sconosciuto</td><td>NetAlertX</td><td>Gratis</td></tr>
                    <tr><td>Monitora e allerta su tutto</td><td>Wazuh</td><td>Gratis</td></tr>
                    <tr><td>Rileva attacchi di rete</td><td>Suricata</td><td>Gratis</td></tr>
                    <tr><td>Trova vulnerabilità</td><td>OpenVAS (Greenbone)</td><td>Gratis</td></tr>
                    <tr><td>Accesso remoto sicuro</td><td>WireGuard</td><td>Gratis</td></tr>
                    <tr><td>Monitora prestazioni</td><td>Zabbix</td><td>Gratis</td></tr>
                    <tr><td>Gestisce le tue password</td><td>Bitwarden (self-hosted)</td><td>Gratis</td></tr>
                </table>
            </div>
        </div>
    </div>
    <div class="footer">
        <p>© 2026 <a href="https://opensourcesociety.net" target="_blank">Open Source Society</a> — I tuoi dati. Le tue regole. La tua infrastruttura.</p>
    </div>
</div>
<script>
const TOTAL_Q = 25;
function getVal(name) { const el = document.querySelector(`input[name="${name}"]:checked`); return el ? parseInt(el.value) : null; }
function updateProgress() {
    const answered = document.querySelectorAll('input[type="radio"]:checked').length;
    document.getElementById('progress').style.width = (answered / TOTAL_Q * 100) + '%';
    document.getElementById('progressText').textContent = answered;
}
document.querySelectorAll('input[type="radio"]').forEach(r => r.addEventListener('change', updateProgress));
function calcola() {
    let score = 0, maxScore = 0, answered = 0;
    document.querySelectorAll('.question').forEach(q => {
        const w = parseInt(q.dataset.weight); maxScore += w;
        const sel = q.querySelector('input[type="radio"]:checked');
        if (sel) { score += parseInt(sel.value); answered++; }
    });
    if (answered < TOTAL_Q) { alert(`Hai risposto a ${answered} domande su ${TOTAL_Q}. Completa tutte per un risultato accurato.`); return; }
    const pct = Math.round((score / maxScore) * 100);
    const circumference = 364.4;
    const offset = circumference - (pct / 100) * circumference;
    const ring = document.getElementById('ringFill');
    ring.style.strokeDashoffset = offset;
    ring.style.stroke = pct >= 80 ? '#4caf50' : pct >= 50 ? '#ff9800' : '#f44336';
    document.getElementById('scoreValue').textContent = pct + '%';
    document.getElementById('scoreValue').style.color = pct >= 80 ? '#4caf50' : pct >= 50 ? '#ff9800' : '#f44336';
    const verdict = document.getElementById('verdict');
    if (pct >= 80) { verdict.textContent = 'Ottimo! La tua rete è ben protetta.'; verdict.style.color = '#4caf50'; }
    else if (pct >= 50) { verdict.textContent = 'Buona base, ma ci sono punti deboli da migliorare.'; verdict.style.color = '#ff9800'; }
    else { verdict.textContent = 'La tua rete è molto vulnerabile. Ecco cosa fare subito.'; verdict.style.color = '#f44336'; }
    document.getElementById('scoreDetail').textContent = `Punteggio: ${score} su ${maxScore} punti`;
    const recs = [];
    const icon = '<svg viewBox="0 0 24 24" fill="none" stroke="#ff8c00" stroke-width="2" stroke-linecap="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>';
    if (getVal('q1') < 4) recs.push({ tool: 'Router con OpenWrt', desc: 'Sostituisci il router del provider con un GL.iNet BE9300 (o simile) con OpenWrt. Ti dà controllo totale: firewall, VPN, blocco IP malevoli. Una tantum, poi è tutto gratuito.' });
    if (getVal('q5') === 0) recs.push({ tool: 'Rete separata per i dispositivi smart', desc: 'Crea una rete Wi-Fi separata per tele, lampadine e assistenti. Se uno viene "hackerato", non può raggiungere i tuoi PC e il NAS.' });
    if (getVal('q15') < 5) recs.push({ tool: 'Filtro DNS (AdGuard Home)', desc: 'Installa AdGuard Home sul router o su un Raspberry Pi. Blocca pubblicità, tracker e siti malevoli per tutti i dispositivi in casa. Si aggiorna da solo.' });
    if (getVal('q16') < 5) recs.push({ tool: 'Rilevamento intrusioni (Suricata + Wazuh)', desc: 'Suricata "guarda" il traffico di rete e segnala comportamenti sospetti. Wazuh raccoglie tutti gli eventi e ti avvisa in tempo reale. Entrambi gratuiti.' });
    if (getVal('q17') < 5) recs.push({ tool: 'Avviso dispositivi sconosciuti (NetAlertX)', desc: 'NetAlertX ti avvia su Telegram o telefono quando un dispositivo nuovo si collega alla rete. Così sai subito se c\'è qualcuno che non dovrebbe essere lì.' });
    if (getVal('q18') < 5) recs.push({ tool: 'Scansione periodica (OpenVAS)', desc: 'Fai una scansione della rete una volta al mese con OpenVAS. Trova dispositivi obsoleti, servizi esposti e vulnerabilità note. Il database si aggiorna da solo.' });
    if (getVal('q19') < 5) recs.push({ tool: 'Log centralizzati (Wazuh)', desc: 'Wazuh raccoglie i log di tutti i tuoi dispositivi in un unico posto. In caso di problema, hai la "registrazione" di tutto ciò che è successo.' });
    if (getVal('q21') < 5) recs.push({ tool: 'VPN per l\'accesso da fuori (WireGuard)', desc: 'Invece di aprire porte sul router, usa WireGuard. Ti colleghi alla rete di casa in modo sicuro e crittografato, senza esporre nulla a internet.' });
    if (getVal('q14') < 5) recs.push({ tool: 'Aggiornamenti automatici', desc: 'Attiva gli aggiornamenti automatici su PC, NAS e dispositivi smart. Le patch di sicurezza sono la prima difesa contro gli exploit.' });
    if (getVal('q25') < 5) recs.push({ tool: 'Un piccolo "cervello" di sicurezza', desc: 'Un Raspberry Pi 5 o un mini-PC collegato alla rete può ospitare tutti gli strumenti di sicurezza. Costo: 100-200€ una tantum.' });
    const recsDiv = document.getElementById('recs');
    if (recs.length === 0) { recsDiv.innerHTML = '<p style="color:var(--success)">✅ Ottimo lavoro! Nessun intervento urgente. Continua a monitorare e aggiornare regolarmente.</p>'; }
    else { recsDiv.innerHTML = recs.map(r => `<div class="rec-item">${icon}<div><div class="rec-tool">${r.tool}</div><div class="rec-desc">${r.desc}</div></div></div>`).join(''); }
    document.getElementById('result').style.display = 'block';
    document.getElementById('result').scrollIntoView({ behavior: 'smooth' });
}
function generaReportHTML() {
    const pct = document.getElementById('scoreValue').textContent;
    const verdict = document.getElementById('verdict').textContent;
    const detail = document.getElementById('scoreDetail').textContent;
    const date = new Date().toLocaleString('it-IT');
    let risposte = '';
    document.querySelectorAll('.question').forEach((q, i) => {
        const label = q.querySelector('.q-label').textContent.replace(/\d+.*peso.*$/s, '').trim();
        const sel = q.querySelector('input[type="radio"]:checked');
        const val = sel ? sel.parentElement.textContent.trim() : '—';
        risposte += `<tr><td>${i+1}</td><td>${label}</td><td>${val}</td></tr>`;
    });
    const recsHTML = document.getElementById('recs').innerHTML.replace(/<svg[\s\S]*?<\/svg>/g, '');
    return `<!DOCTYPE html>
<html lang="it"><head><meta charset="UTF-8"><title>Report Sicurezza Rete Domestica — ${date}</title>
<style>
:root{--bg:#fff;--card:#f8f8f8;--accent:#ff8c00;--accent2:#ffc107;--text:#1a1a1a;--muted:#555;--border:#e0e0e0}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;padding:0;max-width:800px;margin:0 auto}
.header{background:#fff;padding:16px 20px;display:flex;align-items:center;gap:12px;border-bottom:2px solid var(--accent);margin-bottom:30px}
.header .logo-text{display:flex;flex-direction:column;line-height:1.1}
.header .logo-text .os{font-size:1.2em;font-weight:800;color:#1a1a1a}
.header .logo-text .soc{font-size:0.9em;font-weight:600;color:var(--accent);font-style:italic}
h1{font-size:1.6em;margin-bottom:4px;color:var(--text)}
h1 span{color:var(--accent)}
h2{color:var(--accent);font-size:1.1em;margin:24px 0 12px;border-bottom:1px solid var(--border);padding-bottom:6px}
.tagline{color:var(--muted);font-style:italic;margin-bottom:20px}
.score{text-align:center;font-size:3em;font-weight:800;color:var(--accent);margin:20px 0}
table{width:100%;border-collapse:collapse;margin:12px 0;font-size:0.9em}
th,td{padding:8px 10px;border:1px solid var(--border);text-align:left}
th{background:var(--card);color:var(--accent);font-size:0.8em;text-transform:uppercase}
.rec{padding:10px 12px;margin:8px 0;background:var(--card);border-left:3px solid var(--accent);border-radius:0 6px 6px 0;font-size:0.9em}
.rec strong{color:var(--accent)}
.footer{margin-top:40px;padding:16px 20px;border-top:1px solid var(--border);color:var(--muted);font-size:0.8em;text-align:center}
.footer a{color:var(--accent);text-decoration:none;font-weight:600}
@media print{.header{border-bottom:2px solid var(--accent)}}
</style></head><body>
<div class="header">
    <svg viewBox="0 0 60 60" width="40" height="40" fill="none"><circle cx="30" cy="10" r="4.5" fill="#ffc107"/><circle cx="16" cy="22" r="4" fill="#ff8c00"/><circle cx="44" cy="22" r="4" fill="#ff8c00"/><circle cx="10" cy="38" r="3.5" fill="#ffc107"/><circle cx="30" cy="34" r="5.5" fill="#ff8c00"/><circle cx="50" cy="38" r="3.5" fill="#ffc107"/><circle cx="18" cy="50" r="4" fill="#ff8c00"/><circle cx="42" cy="50" r="4" fill="#ff8c00"/><line x1="30" y1="14.5" x2="16" y2="22" stroke="#ffc107" stroke-width="1.5"/><line x1="30" y1="14.5" x2="44" y2="22" stroke="#ffc107" stroke-width="1.5"/><line x1="16" y1="26" x2="10" y2="38" stroke="#ff8c00" stroke-width="1.2"/><line x1="16" y1="26" x2="30" y2="34" stroke="#ff8c00" stroke-width="1.2"/><line x1="44" y1="26" x2="50" y2="38" stroke="#ff8c00" stroke-width="1.2"/><line x1="44" y1="26" x2="30" y2="34" stroke="#ff8c00" stroke-width="1.2"/><line x1="10" y1="41.5" x2="18" y2="50" stroke="#ffc107" stroke-width="1.2"/><line x1="30" y1="39.5" x2="18" y2="50" stroke="#ffc107" stroke-width="1.2"/><line x1="30" y1="39.5" x2="42" y2="50" stroke="#ffc107" stroke-width="1.2"/><line x1="50" y1="41.5" x2="42" y2="50" stroke="#ffc107" stroke-width="1.2"/></svg>
    <div class="logo-text"><span class="os">Open Source</span><span class="soc">Society</span></div>
</div>
<h1>🛡️ Report Sicurezza Rete Domestica</h1>
<p class="tagline">I tuoi dati. Le tue regole. La tua infrastruttura.</p>
<p><strong>Data:</strong> ${date}</p>
<div class="score">${pct}</div>
<p style="text-align:center;margin-bottom:8px"><strong>${verdict}</strong></p>
<p style="text-align:center;color:var(--muted)">${detail}</p>
<h2>Le tue risposte</h2>
<table><tr><th>#</th><th>Domanda</th><th>La tua risposta</th></tr>${risposte}</table>
<h2>Cosa puoi fare per migliorare</h2>
${recsHTML || '<p>Nessun intervento urgente.</p>'}
<h2>Kit consigliato</h2>
<p>GL.iNet BE9300 (OpenWrt) · BanIP · CrowdSec · AdGuard Home · tinyHIPPO · NetAlertX · Wazuh · Suricata · OpenVAS · WireGuard · Zabbix · Bitwarden</p>
<div class="footer">© 2026 <a href="https://opensourcesociety.net" target="_blank">Open Source Society</a> — I tuoi dati. Le tue regole. La tua infrastruttura.<br>Generato automaticamente — ${date}</div>
</body></html>`;
}
function scaricaReport() {
    if (document.getElementById('result').style.display !== 'block') { alert('Prima calcola il punteggio!'); return; }
    const html = generaReportHTML();
    const blob = new Blob([html], { type: 'text/html' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a'); a.href = url;
    a.download = `report-sicurezza-domestica-${new Date().toISOString().slice(0,10)}.html`;
    a.click(); URL.revokeObjectURL(url);
}
function mandaReport() {
    if (document.getElementById('result').style.display !== 'block') { alert('Prima calcola il punteggio!'); return; }
    const pct = document.getElementById('scoreValue').textContent;
    const verdict = document.getElementById('verdict').textContent;
    const date = new Date().toLocaleString('it-IT');
    let body = `REPORT SICUREZZA RETE DOMESTICA — Open Source Society\n${date}\n\n`;
    body += `PUNTEGGIO: ${pct}\n${verdict}\n\nRISPOSTE:\n`;
    document.querySelectorAll('.question').forEach((q, i) => {
        const label = q.querySelector('.q-label').textContent.replace(/\d+.*peso.*$/s, '').trim();
        const sel = q.querySelector('input[type="radio"]:checked');
        const val = sel ? sel.parentElement.textContent.trim() : '—';
        body += `${i+1}. ${label}\n   → ${val}\n`;
    });
    body += `\nCOSA FARE PER MIGLIORARE:\n`;
    document.querySelectorAll('.rec-item').forEach(r => { body += `• ${r.textContent.trim()}\n`; });
    if (document.querySelectorAll('.rec-item').length === 0) body += `• Nessun intervento urgente.\n`;
    const subject = encodeURIComponent(`Report Sicurezza Domestica — ${pct} — ${date}`);
    const bodyEnc = encodeURIComponent(body);
    window.location.href = `mailto:?subject=${subject}&body=${bodyEnc}`;
}
async function condividiReport() {
    if (document.getElementById('result').style.display !== 'block') { alert('Prima calcola il punteggio!'); return; }
    const pct = document.getElementById('scoreValue').textContent;
    const verdict = document.getElementById('verdict').textContent;
    const date = new Date().toLocaleString('it-IT');
    const text = `🛡️ Report Sicurezza Rete Domestica — Open Source Society\n📅 ${date}\n📊 Punteggio: ${pct}\n${verdict}`;
    if (navigator.share) { try { await navigator.share({ title: 'Report Sicurezza Domestica', text }); } catch (e) {} }
    else { await navigator.clipboard.writeText(text); alert('Report copiato negli appunti!'); }
}
function reset() {
    document.getElementById('quiz').reset();
    document.getElementById('result').style.display = 'none';
    document.getElementById('progress').style.width = '0%';
    document.getElementById('progressText').textContent = '0';
    document.getElementById('ringFill').style.strokeDashoffset = '364.4';
    window.scrollTo({ top: 0, behavior: 'smooth' });
}
</script>
</body>
</html>   